<template>
  <view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module leftIcon="arrow-left" :title="title" />
		<mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="review-item u-flex u-flex-between" v-for="item in reviewList" :key="item.ksbh">
				<view>
					<view class="sjmc">{{ item.sjmc }}</view>
					<view class="kssj">考试时间：{{ item.kssj }}</view>
				</view>
				<view class="flex-shrink-0 u-flex-y u-flex-between">
					<view class="ksfs u-flex-x-center">
						<view v-if="Number(item.ksfs) >= 75" class="success">{{ item.ksfs }}</view>
						<view v-else-if="Number(item.ksfs) >= 65" class="warning">{{ item.ksfs }}</view>
						<view v-else class="error">{{ item.ksfs }}</view>
					</view>
					<view class="btn-detail u-flex-shrink" @click="toDetail(item)">查看详情</view>
				</view>
			</view>
		</mescroll-uni>
		<view class="btn-add u-flex-xy-center" @click="add">
			<u-icon name="plus" size="52rpx" color="#409EFF" />
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { sjxqList } from "@/config/api.js"

export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			title: '模考复盘',
			height: 0,
			reviewList: [],
			downOption: {
				use: false
			},
			upOption: {
				textNoMore: '一不小心被你看完啦~',
				toTop: {
					right: '24rpx',
					bottom: '60rpx'
				}
			}
		}
	},
	onShow() {
		const res = uni.getSystemInfoSync()
		this.height = res.windowHeight - 100 // 100为组件高度
		this.mescroll.resetUpScroll()
	},
	methods: {
		...mapMutations(['setLoginShow', 'emptyUserInfo']),
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		async upCallback(page) {
			try {
				const res = await sjxqList(`?pageNum=${page.num}&pageSize=${page.size}`)
				if (res && res.rows) {
					// 后台接口有返回列表的总数据量
					this.mescroll.endBySize(res.rows?.length || 0, res.total); // 必传参数(当前页的数据个数, 总数据量)
					// 如果是第一页需手动制空列表
					if(page.num == 1) {
						this.reviewList = []
					}
					this.reviewList = Object.freeze(this.reviewList.concat(res.rows)); //追加新数据	
				}else{
					this.emptyUserInfo(); 
					uni.showModal({
						title: '提示',
						content: '当前登录已无效，请重新登陆。',
						showCancel: false,
						    success: function (res) {  
						        if (res.confirm) {  
						           uni.navigateBack({delta: 1});   
						        }  
						    } 
					});					
				}
			} catch (error) {
				//联网失败, 结束加载
				this.mescroll.endErr();
			}
		},
		toDetail(item) {
			const data = JSON.stringify(item)
			uni.navigateTo({
				url: `/pages/review/components/add?data=${data}&type=3`
			})
		},
		add() {
			uni.navigateTo({
				url: `/pages/review/components/add`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.view-contain {
	position: relative;

	.search {
		margin: 24rpx 24rpx;
	}

	.review-item {
		width: calc(100vw - 48rpx);
		margin: 12rpx 24rpx 12rpx;
		padding: 24rpx;
		background-color: #FFF;
		border-radius: 32rpx;

		.sjmc {
			font-size: 42rpx;
			font-weight: bold;
			margin-bottom: 32rpx;
			white-space: normal;
			word-break: break-all;
			overflow: hidden;
		}

		.kssj {
			font-size: 28rpx;
			font-weight: normal;
			color: #333;
		}

		.ksfs {
			font-size: 56rpx;

			.success {
				color: #5ac725;
			}

			.warning {
				color: #f9ae3d;
			}

			.error {
				color: #f56c6c;
			}
		}

		.btn-detail {
			border-radius: 12rpx;
			font-size: 28rpx;
			padding: 0 12rpx;
			color: #409EFF;
			border: 1rpx solid #409EFF;
		}
	}

	.flex-shrink-0 {
		flex-shrink: 0;
	}

	.btn-add {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		position: absolute;
		right: 24rpx;
		bottom: 160rpx;
		background-color: #FFF;
		border: 2rpx solid #409EFF;
	}

}
</style>
